<template>
    <el-dialog :title="isEdit?'编辑应用版本':'新增应用版本'" :visible.sync="dialogForm" width="720px">
        <el-form :inline="true" ref="form" :model="form" :rules="rules" class="add-form" label-width="84px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="版本代码" prop="versionCode">
                        <el-input v-model="form.versionCode"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="版本名称" prop="versionName">
                        <el-input v-model="form.versionName"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="应用名称" prop="appName">
                        <auto-search-app-info @selectName="v=>form.appName=v" @change="v=>form.appId=v"
                                              :name="form.appName"></auto-search-app-info>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="强制更新" prop="force">
                        <el-select v-model="form.force" placeholder="请选择">
                            <el-option v-for="[key, val] in _dictTrueOrFalse" :key="key" :label="val"
                                       :value="key"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="文件上传">
                        <attachments v-model="form.attachments" :isSingle="isSingle" :isLimit="isLimit" @upload="uploads"></attachments>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="更新地址" prop="updateUrl">
                        <!-- <el-input v-model="form.updateUrl" readonly disabled></el-input> -->
                         <span style="word-break: break-all;display: inline-block;width: 200px;">
                             {{form.updateUrl}}
                         </span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="应用描述" prop="versionDesc">
                        <el-input type="textarea" :rows="3" style="width: 560px" placeholder="请输入内容"
                                  v-model="form.versionDesc"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { addAppVersion, updateAppVersion } from "@/api/system/appVersion";
    import { PUBLIC_LIMIT, PUBLIC_NUMBER, PUBLIC_NUM_CODE, REG_LETTER_NUM_POINT } from "@/utils/Reg";
    import { maxLength, sortLength } from "@/utils/rules";
    import autoSearchAppInfo from "@/components/autocomplete/autoSearchAppInfo";
    import attachments from '@/components/file-upload';
    import { getSystemParameterList } from "@/api/system/systemParameter";

    export default {
        name: "appInfoForm",
        components: { autoSearchAppInfo, attachments },
        data() {
            return {
                form: this.clearForm(),
                rules: {
                    versionCode: [
                        {
                            required: true,
                            message: "请输入版本代码",
                            trigger: "change"
                        }
                    ],
                    versionName: [
                        {
                            required: true,
                            message: "请输入版本名称",
                            trigger: "change"
                        },
                        {
                            pattern: REG_LETTER_NUM_POINT,
                            message: '只能输入字母,数字及小数点',
                            trigger: "change"
                        },
                        sortLength
                    ],
                    appName: [
                        {
                            required: true,
                            message: "请选择应用名称",
                            trigger: "change"
                        }
                    ],
                    versionDesc: [maxLength]
                },
                dialogForm: false,
                isEdit: false,
                isSingle: true,
                isLimit: 1
            };
        },
        methods: {
            uploads(val) {
                if (val.length === 0) {
                    this.$set(this.form, 'updateUrl', '')
                } else {
                    getSystemParameterList({ 'search_LIKE_paramCode': 'BACK_SERVICE_URL' }).then(res => {
                        if (res.data.aaData.length > 0) {
                            this.$set(this.form, 'updateUrl', res.data.aaData[0].paramValue + val[0].viewPath)
                        }
                    })
                }

            },
            clearForm() {
                return {
                    versionCode: "",
                    versionName: "",
                    appName: "",
                    appId: "",
                    force: false,
                    attachments: [],
                    versionDesc: "",
                };
            },
            // 保存
            handleSubmit() {
                this.$refs.form.validate(valid => {
                    console.log(valid)
                    if (valid) {
                        this.isEdit ? this.handleToEdit() : this.handleToAdd();
                    } else {
                        this.$message({
                            message: "请检查表单",
                            type: "error"
                        });
                    }
                });
            },
            // 新增
            handleToAdd() {
                addAppVersion(this.form).then(res => {
                    this.$message({
                        message: "新增成功!",
                        type: "success"
                    });
                    this.dialogForm = false;
                    this.$emit("load");
                });
            },
            // 编辑
            handleToEdit() {
                updateAppVersion(this.form.id, this.form).then(res => {
                    this.$message({
                        message: "编辑成功!",
                        type: "success"
                    });
                    this.dialogForm = false;
                    this.$emit("load");
                });
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$refs.form.resetFields();
                    this.isEdit = false;
                    this.form = this.clearForm();
                }
            }
        }
    };
</script>

<style scoped>
</style>
